<template>
  <div :class="inline ? 'inline' : ''">
    <a-upload
      name="file"
      :headers="{ token: token }"
      :disabled="disabled"
      :action="uploadUrl"
      :data="postData"
      :before-upload="beforeUpload"
      :showUploadList="false"
      @change="handleChanges"
    >
      <a-button :class="className" :size="size" icon="download" :disabled="disabled" :loading="btnloading">
        {{ title }}
      </a-button>
    </a-upload>
    <a-modal
      title="导入格式错误详情"
      width="60%"
      :maskClosable="false"
      okText="保存"
      cancelText="取消"
      :visible="dialog.show"
      :footer="null"
      @cancel="cancel"
    >
      <div v-for="(item, index) in dialog.list" :key="index">
        <div style="display: flex; align-items: center">
          <span style="font-size: 16px; font-weight: blod; padding-left: 15px">{{ index + 1 }}：</span>
          <span>{{ item }}</span>
        </div>
        <a-divider />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['token']),
  },
  props: {
    className: {
      type: String,
      default: undefined,
    },
    size: {
      type: String,
      default: undefined,
    },
    postData: {
      type: Object,
      default: undefined,
    },
    inline: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1000,
    },
    title: {
      type: String,
      default: '导入',
    },
    url: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      btnloading: false,
      ids: [],
      fileNames: [],
      hideUpload: false,
      fileList: [],
      uploadUrl: process.env.VUE_APP_API_BASE_URL + this.url,
      dialog: {
        show: false,
        list: [],
      },
    }
  },
  name: 'importUpload',
  methods: {
    beforeUpload(file) {
      // const isType = file.type == ''
      const isXLS = file.type === 'application/vnd.ms-excel'
      const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isXLS && !isXLSX) {
        this.$message.error('导入文件必须是xls/xlsx 格式!')
        return false
      }
      return isXLS || isXLSX
    },
    handleChanges({ file, fileList }) {
      if (file.status) {
        this.btnloading = true
      }
      if (file.status == 'done') {
        if (file.response.code == 200) {
          this.$message.success('导入成功')
          this.btnloading = false
          this.$emit('getFiles', file.response.data)
        } else {
          this.btnloading = false
          if (file.response.data) {
            this.dialog.list = file.response.data
            this.dialog.show = true
          } else {
            this.$message.warning(file.response.msg)
          }
        }
      }
    },
    //关闭错误详情
    cancel() {
      this.dialog.list = []
      this.dialog.show = false
    },
  },
  mounted() {},

  watch: {},
}
</script>
<style scoped>
.ant-divider-horizontal {
  margin: 10px 0;
}
</style>


